<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>商城首页-供应商主页-商品详情</title>
	<link rel="stylesheet" href="css/index.css">
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/detail.css">
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	
	<style>
	body{
		background: #ffffff;
	}
	</style>

</head>
<body>
	
	<!-- 顶部导航条开始 -->
	<div class="puhuishopping_common_titlelink" id="puhuishopping_common_titlelink">
		<!-- 导航条左部 -->
		<div class="centerbody">
			<div class="title_left">
				<span class="puhuishopping_common_city" id="puhuishopping_common_city">重庆</span><span class="puhuishopping_common_citychange" id="puhuishopping_common_citychange">[ 切换城市 ]</span>
				<!-- <div class='citylist' id='citylist'></div> -->
			</div>	
		<!-- 导航条右部 -->
					<!-- 已登录 -->
			<div class="title_right">
				您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-商城首页-登录页面.html" class="puhuishopping_common_login" id="puhuishopping_common_login">请登录</a>
				<a href="普惠商城-商城首页-注册页面.html" class="puhuishopping_common_hyzc">会员注册</a>
				<a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>
				<a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>
				<div style="clear: both"></div>
			</div>
			<!-- 未登录 -->
		<!-- 	<div class="title_right">
				您好&nbsp;&nbsp;,&nbsp;<a href="普惠商城-个人中心.html" class="puhuishopping_common_login" id="puhuishopping_common_login">普惠会员</a>
				<a href="#" class="puhuishopping_common_hyzc">[退出]</a>
				<a href="普惠商城-个人中心-订单中心-线上订单.html" class="puhuishopping_common_wddd">我的订单</a>
				<a href="javascript:void(0);" class="puhuishopping_common_ydsc">移动商城</a>
				<div style="clear: both"></div>
			</div> -->
		</div>	
	</div>
	<!-- 顶部导航条结束 -->
	<!-- 顶部搜索栏部分开始 -->
	
	<div class="centerbody search">
        <a href="普惠商城-商城首页.html"><img src="images/普惠logo最终版.png" alt="" class="logo"></a>
		<!-- logo图右侧供货商文字-->
		<div class="detail_title">
			<p class="name">供应商000000</p>
			<p class="supply">全国直供</p>
		</div>
		<!-- 详情页搜索框 -->
		<div class="searchbox detail_search">
			<input type="text" class="searchtxt"><input type="button" class="searchbtn" value="搜索">
		</div>
	
	</div>
	<!-- 顶部商品分类和一级菜单 -->
	<div class="centerbody bannerlist">
		<div class="listleft">
			<p class="ListType">商品分类</p>
			<ul class="listbox" style="display: none;">
				<li>家用电器</li>
				<li>手机/ 运营商/ 数码</li>
				<li>电脑/ 办公</li>
				<li>家具/ 家具/ 家装/ 厨具</li>
				<li>男装/ 女装/ 童装/ 内衣</li>
				<li>美妆个护/ 清洁用品/ 宠物</li>
				<li>鞋靴/ 箱包/ 珠宝/ 奢侈品</li>
				<li>运动/ 户外/ 钟表</li>
				<li>汽车/ 汽车用品</li>
				<li>母婴/ 玩具乐器</li>
				<li>食品/ 酒类/ 生鲜/ 特产</li>
				<li>医药保健</li>
				<li>图书/ 音像/ 电子书</li>
				<li>机票/ 酒店/ 旅游/ 生活</li>
				<li>理财/ 众筹/ 白条/ 保险</li>
			</ul>
		</div>
		
		<div class="listright">
			<a href="普惠商城-商城首页.html">首页</a>
			<!-- <a href="javascript:void(0);">普惠特色</a>
			<a href="javascript:void(0);">服装美妆</a>
			<a href="javascript:void(0);">家电手机</a>
			<a href="javascript:void(0);">电脑数码</a>
			<a href="javascript:void(0);">食品生鲜</a>
			<a href="javascript:void(0);">母婴玩具</a> -->
		</div>
		<div style="clear: both"></div>
	</div>
<!-- 灰色分割块 -->
	<div class="bannerlist_gray"></div>
<!-- 详情正文 白色区域 -->
	<div class="detail_box_white" style="margin-top: 0;">
		<div class="centerbody box_white" style="margin-top: 13px;">
			<div class="box_white_left">
				<div class="preview">
					<div id="vertical" class="bigImg">
						<img id="midimg" src="big/05.jpg" alt="" />
						<div style="display:none;" id="winSelector"></div>
					</div><!--bigImg end-->
					<div class="smallImg">
						<!--<div class="scrollbutton smallImgUp disabled"></div>-->
						<div id="imageMenu">
							<ul class="imageMenuList clearfix">
								<li id="onlickImg"><img src="big/05.jpg" alt="洋妞"/></li>
								<li><img src="big/02.jpg" alt="洋妞"/></li>
								<li><img src="big/03.jpg" alt="洋妞"/></li>
								<li><img src="big/04.jpg" alt="洋妞"/></li>
								<li><img src="big/01.jpg" alt="洋妞"/></li>
							</ul>
						</div>
						<!--<div class="scrollbutton smallImgDown"></div>-->
					</div><!--smallImg end-->
					<div id="bigView" style="display:none;"><img width="950" height="950" alt="" src="" /></div>
				</div>
				<!--<img src="images/图层-1.png" alt="" class="detail_pic_show_1">-->
				<!--<ul>-->
					<!--<li>-->
						<!--<img src="images/图层-2.png" alt="">-->
					<!--</li>-->
					<!--<li>-->
						<!--<img src="images/图层-3.png" alt="">-->
					<!--</li>-->
					<!--<li>-->
						<!--<img src="images/图层-4.png" alt="">-->
					<!--</li>-->
					<!--<li>-->
						<!--<img src="images/图层-5.png" alt="">-->
					<!--</li>-->
					<!--<li>-->
						<!--<img src="images/图层-5-拷贝.png" alt="">-->
					<!--</li>-->
				<!--</ul>-->
			</div>
			<div class="box_white_right">
				<p><span class="goods_detail_tit">檀趣高端原创紫红皮六瓣矮桩小金刚菩提子108颗佛珠手链 蜜蜡孤品</span></p>
				<p><span class="goods_detail_txt">市场参考价：</span><span class="goods_detail_price_1">¥2600.00</span></p>
				<p><span class="goods_detail_txt">普惠价格：</span><span class="goods_detail_price_2">¥1000.00</span></p>
				<p><span class="goods_detail_txt">运费：</span><span class="trans_price">10</span><span class="goods_detail_txt trans">元/件，</span><span class="trans_num">5</span><span class="goods_detail_txt trans">件包邮</span></p>
				<p><span class="goods_detail_txt">销量：</span>
				<span class="goods_detail_txt goods_detail_num1">500</span>
				<span class="goods_detail_txt" style="padding-left: 112px;">赠送积分：</span>
				<span class="goods_detail_txt goods_detail_num2">1000</span></p>
				<p class="p_float_clear">
					<span class="goods_detail_txt" style="height:30px;line-height:30px;float: left;">数量：</span>
					<span class="num_left">—</span>
					<input type="text" class="num" value="1">
					<span class="num_right">+</span>
				</p>
				<input type="button" value="立即购买" class="buybutton">
			</div>
		</div>
	</div>
<!-- 详情正文 灰色区域 -->
	<div class="detail_box_gray">
		<div class="centerbody ">
			<div class="box_gray_left">
				<span class="rxdp_tit">热销单品</span>
				<div class="rxdp_box">
					<img src="images/图层-9.png" alt="" class="rxdp_pic">
					<span class="rxdp_detail">CVB 双肩电脑包 14'商务双肩笔记本电脑背包 时尚休闲双肩包旅行包</span><span class="rxdp_price">¥199</span>
				</div>
				<div class="rxdp_box">
					<img src="images/图层-9.png" alt="" class="rxdp_pic">
					<span class="rxdp_detail">CVB 双肩电脑包 14'商务双肩笔记本电脑背包 时尚休闲双肩包旅行包</span><span class="rxdp_price">¥199</span>
				</div>
				<div class="rxdp_box">
					<img src="images/图层-9.png" alt="" class="rxdp_pic">
					<span class="rxdp_detail">CVB 双肩电脑包 14'商务双肩笔记本电脑背包 时尚休闲双肩包旅行包</span><span class="rxdp_price">¥199</span>
				</div>
			</div>
			<div class="box_gray_right">
				<span class="rxdp_tit" style="width: 813px;">商品介绍</span>
				<div class="spjs_box">
					<ul>
						<li>品牌：檀趣</li>
						<li>材质：菩提子</li>
						<li>商品形态：金刚菩提</li>
						<li title="颜色分类：六瓣小金刚高端原创款专属颜色分类：六瓣小金刚高端原创款专属颜色分类：六瓣小金刚高端原创款专属颜色分类：六瓣小金刚高端原创款专属" class="word_hidden">颜色分类：六瓣小金刚高端原创款专属颜色分类：六瓣小金刚高端原创款专属颜色分类：六瓣小金刚高端原创款专属颜色分类：六瓣小金刚高端原创款专属颜色分类：六瓣小金刚高端原创款专属</li>
						<li>颗数：108颗</li>
						<li>品相：十品</li>
						<li>尺寸：9mn</li>
					</ul>
				</div>
				<div class="spjs_pic" style="margin-top:33px;">
					<img src="images/123.png" alt="">
					<!--多图测试展示效果-->
					<!--<img src="images/浏览记录-样图.png" alt="">-->
					<!--<img src="images/普惠首页_168.png" alt="">-->
					<!--<img src="images/普惠首页_09.png" alt="">-->
				</div>
			</div>
			<div style="clear: both;"></div>
		</div>
	</div>
<!-- 页面底部 -->
	<div class="foot-banner" style="margin-top: 0;">
		<div class="mod_help_list">
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">帮助中心</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">购物中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">配送中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">支付中心</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">常见问题</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">售后服务</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">退换货政策</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">退换货流程</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">关于我们</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">公司介绍</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">普惠商城简介</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">联系客服</a></li>
					</ul>
			</div>
			<div class="mod_help_nav">
				<span class="mod_help_nav_tit">支付方式</span>
					<ul class="mod_help_nav_con">
						<li><a href="javascript:void(0);" target="_blank" clstag="">微信支付</a></li>
						<li><a href="javascript:void(0);" target="_blank" clstag="">支付宝支付</a></li>

					</ul>
			</div>
		</div>	
		<div class="copyright">
			<p>©2016北京普惠联盟商贸有限公司 puhui315.com 京ICP证070791号|京ICP备10211739号|电子公告服务规则</p>
			<p>电子商务经营许可证(京)字第03889号</p>
			<p>京公网安备11010502025545号</p>
			<p style="height: 34px;width:350px;margin:17px auto 25px">
			<a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-1.png" alt=""></a>
			<a href="javascript:void(0);" class="outlink link-space"><img src="images/foot-2.png" alt=""></a>
			<a href="javascript:void(0);" class="outlink"><img src="images/foot-3.png" alt=""></a>
			</p>
		</div>

	</div>
	<!-- 弹窗部分 -->
		<div class="shadow">
		</div>
		<div class="login_box_2">
				<img src="images/取消.png" alt="" class="cancel">
				<span class="login_tit">请登录账号</span>
				<label for="" style="padding-left: 56px;">登录账号：</label><input type="text" class="inputbox user">
				<label for="" style="padding-left: 56px;">登录密码：</label><input type="password" class="inputbox password" >
				<div style="position: relative;"><label for="" style="padding-left: 56px;">验证码：</label><input type="text" class="inputbox yzm"><span class="get_yzm">发送验证码</span></input></div>
				<input type="button" class="inputbox btn" value="登录" style="font-size: 18px;">
				<div class="login_box_bottom"> 
					<span class="login_box_bottom_txt">还没有账号？<a href="reg.html" class="login_box_bottom_link_1">现在去注册</a></span><a href="forget.html" class="login_box_bottom_link_2">忘记密码？</a>
					<div style="clear: both;"></div>
				</div>
		</div>
		
	
</body>
<script th:inline="javascript">
	$(function(){
		$('.cancel').click(function(){
			$('.shadow').css('display','none');
			$('.login_box_2').css('display','none');
		})
		
		$('.buybutton').click(function(){
			$('.shadow').css('display','block');
			$('.login_box_2').css('display','block');
		})
		/*$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		$(window).resize(function(){
			$('.shadow').css('height',$(window).height());
			$('.login_box_2').css('top',($(window).height()-$('.login_box_2').height())/2);
			$('.login_box_2').css('left',($(window).width()-$('.login_box_2').width())/2);
		});*/
        $('.listleft').hover(function(){
            $('.ListType').siblings('.listbox').show();
        },function(){
            $('.ListType').siblings('.listbox').hide();
        });
        $('.num_left').click(function(){
            var count=$('.num').val();
            count--;
            $('.num').val(count);
        });
        $('.num_right').click(function(){
            var count=$('.num').val();
            count++;
            $('.num').val(count);
        })
	})
</script>
<script th:inline="javascript" src="js/magnifier.js"></script>



</html>